<template>
  <div class="map-location-container">
    <Header title="定位地址"/>
    <Search @focus="isShowSearchResult = true" placeholder="街道/大厦/小区" show-action v-model="searchText" @search="onSearch">
      <div slot="action" @click="onSearch">搜索</div>
    </Search>
    <!-- 地图 -->
    <div class="map-container">
      <baidu-map class="map" :center="center" :zoom="15" @ready="ready" @dragend="dragend">
        <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-geolocation>
      </baidu-map>
      <img src="../../assets/mark.png" class="mark" alt>
    </div>
    <!-- 列表 -->
    <div class="van-addressListView">
      <div
        v-for="(item, index) in addressList"
        :key="item.uid"
        class="addressCell"
        @click="selectCell(item)"
      >
        <div class="address">
          <span v-show="index === 0">[当前]</span>
          <span>{{item.title}}</span>
        </div>
        <div class="detail">
          <span>{{item.address}}</span>
        </div>
      </div>
    </div>
    <Popup position="bottom" v-model="isShowSearchResult" :overlay="false">
      <div class="van-addressListView van-search-result">
        <div
          v-for="item in searchAddressList"
          :key="item.uid"
          class="addressCell"
          @click="selectCell(item)"
        >
          <div class="address">
            <span>{{item.title}}</span>
          </div>
          <div class="detail">
            <span>{{item.address}}</span>
          </div>
        </div>
      </div>
    </Popup>
  </div>
</template>
<script>
import { Search, Popup } from "vant";
import { appendScript } from '../../utils';
import Header from "@/components/Header";
export default {
  components: {
    Search,
    Header,
    Popup
  },
  data() {
    return {
      addressList: [],
      searchAddressList: [],
      isShowSearchResult: false,
      center: "",
      map: null,
      BMap: null,
      searchText: '',
      type: '0'
    };
  },
  methods: {
    onSearch() {
      var options = {
        onSearchComplete: (results) => {
          // 判断状态是否正确
          if (local.getStatus() === BMAP_STATUS_SUCCESS) {
            this.searchAddressList = results.Ar;
            console.log(results);
          }
        }
      };
      var local = new BMap.LocalSearch(this.map, options);
      local.search(this.searchText);
    },
    ready({ BMap, map }) {
      this.BMap = BMap;
      this.map = map;
      const geolocation = new this.BMap.Geolocation();
      geolocation.getCurrentPosition((r) => {
        // 120.237253,30.226599
        // latitude: "30.25924446"
        // longitude: "120.21937542"
        const point = r.point;
        const mk = new BMap.Marker(point);
        this.center = point;
		  	this.map.addOverlay(mk);
        this.map.centerAndZoom(point, 12);
        this.getPOI(point).then(({ surroundingPois }) => {
          this.addressList = surroundingPois;
        });
      }, {
        enableHighAccuracy: true,
        timeout: 10,
        maximumAge: 0
      });
    },
    getPOI(point) {
      var geocoder = new this.BMap.Geocoder();
      var locationOptions = {
        poiRadius: 1500,
        numPois: 10
      };
      var pt = point;
      return new Promise((resolve, reject) => {
        geocoder.getLocation(
          pt,
          result => {
            resolve(result);
          },
          locationOptions
        );
      });
    },
    dragend({ point }) {
      this.getPOI(point).then(({ surroundingPois }) => {
        this.addressList = surroundingPois;
      });
    },
    selectCell(item) {
      const { type } = this;
      if (type === '0') {
        this.$store.commit("SET_LOCATION", item);
      } else if (type === '1'){
        this.$store.commit("SET_ADDRESS_LOCATION", item);
      }
      this.$route.meta.notKeepAlive = true;
      this.$router.go(-1);
    }
  },
  created() {
    this.type = this.$route.query.type;
  },
};
</script>
<style lang="less" scoped>
body {
  height: 100vh;
  overflow: hidden;
}
.map-container {
  position: relative;
  height: 300PX;
  .map {
    width: 100%;
    height: 100%;
  }
  .mark {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30PX;
    height: 30PX;
    margin-top: -15PX;
    transform: translate3d(-50%, -50%, 0);
  }
}

.addressCell {
  background-color: white;
  padding: 20px;
  &:not(:last-child) {
    .border-bottom(#dedede);
  }
}

.address span:first-child {
  font-size: 30px;
  color: #e75858;
}

.address span:last-child {
  font-size: 30px;
  color: #000;
}

.detail span {
  font-size: 27px;
  color: #666;
}
.van-addressListView {
  height: calc(100vh - 400px);
  background-color: #fff;
  overflow: auto;
  text-align: left;
}
.van-search-result{
  height: calc(100vh - 100px);
}
</style>
